<template>
  <div class="marketPages">
    <div class="goods">
      <div class="goodsInfo">
        <img class="goodsCover" mode="widthFix" src="../../../static/market/marketGoods.jpg" alt="">
        <div class="goodsBody">
          <div class="title">{{data.subTitle}}</div>
          <div class="info">{{data.itemName}}</div>
          <div class="goodPri">
            <div class="num">x1</div>
            <div class="pris">
              <img mode="widthFix" src="../../../static/market/dou.png" alt="">
              <span class="pri">{{data.eggNum}}</span>
              <span>颗</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detailInfo">
      <div>
        <img mode="widthFix" src="../../../static/market/dou.png" alt="">
        <span>企鹅蛋支付</span>
      </div>
      <div class="detail">用获得的企鹅蛋兑换喜欢的图书</div>
    </div>
    <div class="payment" @clack="payNow">立即支付</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  onLoad() {
    this.data = JSON.parse(this.$root.$mp.query.query)
    this.getdef()
  },
  methods: {
    getdef() {
      this.$http.get('/address/wx/default').then(res => {
        console.log(res)
      })
    },
    payNow() {
      wx.showToast({
        title: "请先设置收货地址",
        icon: "none"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.marketPages {
    padding: 18rpx 18rpx 90rpx;
    .goods {
        display: flex;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 1rpx solid #eee;
        .goodsInfo {
            display: flex;
            width: 100%;
            .goodsCover {
                margin-right: 30rpx;
                width: 130rpx;
                height: 130rpx;
            }
            .goodsBody {
                flex-grow: 1;
            }
            .title {
                line-height: 40rpx;
                color: #333;
                font-size: 28rpx;
            }
            .info {
                height: 50rpx;
                line-height: 30rpx;
                color: #666;
                font-size: 24rpx;
            }

            .goodPri {
                height: 40rpx;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                .num {
                    color: #666;
                    font-size: 24rpx;
                }
            }
            .pris {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                height: 40rpx;
                color: #c78550;
                img {
                    margin-right: 10rpx;
                    width: 26rpx;
                    height: 38rpx;
                }
                .pri {
                    margin-right: 10rpx;
                    font-size: 40rpx;
                }
                & > span:last-child {
                    font-size: 22rpx;
                }
            }
        }
    }
    .detailInfo {
        padding: 30rpx;
        div {
            height: 34rpx;
        }
        img {
            vertical-align: top;
            margin-right: 10rpx;
            width: 26rpx;
            height: 38rpx;
        }
        span {
            vertical-align: top;
            line-height: 34rpx;
            font-size: 14px;
        }
        .detail {
            margin-top: 20rpx;
            padding-left: 36rpx;
            line-height: 36rpx;
            font-size: 12px;
            color: #666;
        }
    }
    .payment {
        position: fixed;
        bottom: 20rpx;
        left: 5%;
        width: 90%;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        font-size: 30rpx;
        color: #fff;
        border-radius: 10rpx;
        background-color: #c78550;
    }
}
</style>

